<template>
	<view style="padding: 20upx;">
		<view style="display: flex;flex-wrap: wrap;width: 100%;justify-content: space-between;">
			<view v-for="(item, index) in musicList" :key="index" class="guess-item" @click="navToDetailPage(item)" style="width: 48%;overflow: hidden;">
				<view style="position: relative;width: 330upx;height: 240upx;overflow: hidden;">
					<image :src="item.main_img" mode="scaleToFill" style="width: 330upx;height: 240upx;border-radius: 10upx;"></image>
				</view>
				<view>
					<text class="title clamp">{{item.post_title}}</text>
				</view>
				<view>
					<text class="title2 clamp">{{item.catename}}</text>
				</view>
			</view>
			
		</view>			
	</view>
</template>

<script>
	export default {
		data(){
			return{
				musicList: []
			}
		},
		
		onLoad(){
			this.getMusicList();
		},
		
		methods:{
			async getMusicList(){
				this.$zdapi.getMusicList().then( res => {
					this.musicList = res.data
				})
			},
		}
	}
</script>

<style>
	.title2{
		margin-top: 8upx;
		font-size: 26upx;
		color: #999999;
	}
</style>
